import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate, Routes, Route, Navigate } from 'react-router-dom';
import { SubPageLayout } from '../components';
import { 
  UserOutlined, 
  KeyOutlined, 
  EnvironmentOutlined 
} from '@ant-design/icons';

// 子页面组件
import ProfileSettings from '../views/account/ProfileSettings';
import AKSKSettings from '../views/account/AKSKSettings';
import EnvironmentSettings from '../views/account/EnvironmentSettings';

const AccountCenter: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  // 侧边栏菜单配置
  const menuItems = [
    {
      key: '/app/account/profile',
      icon: <UserOutlined />,
      label: '个人资料',
    },
    {
      key: '/app/account/aksk',
      icon: <KeyOutlined />,
      label: 'API密钥',
    },
    {
      key: '/app/account/environment',
      icon: <EnvironmentOutlined />,
      label: '环境变量',
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <SubPageLayout
      menuItems={menuItems}
      selectedKeys={[location.pathname]}
      onMenuClick={handleMenuClick}
      defaultCollapsed={false}
    >
      <Routes>
        <Route index element={<Navigate to="profile" replace />} />
        <Route path="profile" element={<ProfileSettings />} />
        <Route path="aksk" element={<AKSKSettings />} />
        <Route path="environment" element={<EnvironmentSettings />} />
      </Routes>
    </SubPageLayout>
  );
};

export default AccountCenter; 